<template>
  <div>
    <button class="button" @click="toDetails(1)">表格样式</button>

    <button class="button" @click="toDetails(2)">其他类</button>

    <button class="button" @click="toDetails(3)">其他类</button>
    <button class="button" @click="toDetails(4)">其他类</button>
    <div class="describe">
      <div class="describe_title">说明：</div>
      <ul class="describe_item">
        <li>
          1、可点击上面的按钮查看不同的样式
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    toDetails(val) {
      this.$router.push(`/styleDetails?num=${val}`);
    },
  },
  components: {},
};
</script>

<style scoped>
.button {
  display: inline-block;
  background: none;
  outline: none;
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  margin-left: 0;
}
.describe {
  width: 90%;
  height: 100px;
  box-shadow: 0px 0px 5px #1a9be6;
  border-top: #1a9be6 1px solid;
  padding-top: 10px;
  margin-top: 20px;
  margin-left: 10px;
}
.describe_title {
  width: 96%;
  margin-left: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
  /* 直接将英文变成大写 */
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  line-height: 1;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
  position: relative;
}
.describe_item {
  height: 60px;
  overflow-y: auto;
}
</style>